<script setup lang="ts">
    import dayjs from 'dayjs'
    import Amap from '@/components/Amap/index.vue'
    import { useAmapStore } from '@/store/amap'
    import { storeToRefs } from 'pinia'
    import { onMounted, ref, watch } from 'vue'
    const amapStore = useAmapStore()
    const { amap, amapInstance } = storeToRefs(amapStore)

    defineProps<{ showDate: string }>()

    // 比赛数据
    const markerList = ref<any[]>([])
    // 存储marker引用，用于清理
    const markers = ref<any[]>([])

    // 清除所有markers
    const clearMarkers = () => {
        if (markers.value.length && amap.value) {
            try {
                markers.value.forEach((marker) => {
                    amap.value.remove(marker)
                })
                markers.value = []
            } catch (error) {}
        }
    }

    // 添加比赛到地图
    const addMarker = () => {
        if (markerList.value.length && amap.value && amapInstance.value) {
            try {
                // 先清除现有的markers
                clearMarkers()
                // 按Lng, Lat分组
                const groupByLngLat = (list: any[]) => {
                    const map = new Map<string, any[]>()
                    list.forEach((item) => {
                        const key = `${item.Lng},${item.Lat}`
                        if (!map.has(key)) {
                            map.set(key, [])
                        }
                        map.get(key)!.push(item)
                    })
                    return Array.from(map.values())
                }
                const groupedMarkerList = groupByLngLat(markerList.value)
                groupedMarkerList.forEach((item) => {
                    // 按时间顺序排序
                    item.sort((a, b) => {
                        return (
                            dayjs(a.gameTime).unix() - dayjs(b.gameTime).unix()
                        )
                    })
                    item.forEach((item, index) => {
                        addMarkerItem(item, index)
                    })
                })
            } catch (error) {}
        }
    }

    // 添加单个marker
    const addMarkerItem = (item: any, index: number) => {
        // 比赛时间晚于当前时间-未开始
        // 比赛时间早于当前时间-已开始
        // 比赛已添加比分-已结束
        if (item?.id && amap.value && amapInstance.value) {
            try {
                const content = `<div class="custom-content-marker-container">
                          <div class="custom-content-marker">
                            <div class="custom-content-marker-team">
                              <span>${item.homeTeam}</span>
                              <span>VS</span>
                              <span>${item.visitTeam}</span>
                            </div>
                          </div>
                          <div class="custom-content-marker-time 
                              ${item.homeScore && item.visitScore ? 'time-end' : dayjs(item.gameTime).isAfter(dayjs()) ? 'time-unbegin' : 'time-start'}
                          ">
                            <span>${dayjs(item.gameTime).format('HH:mm')}</span>
                          </div>
                          <div class="custom-content-marker-score" style="display: ${item.homeScore && item.visitScore ? 'block' : 'none'}">
                            <span>${item.homeScore}:${item.visitScore}</span>
                          </div>
                        </div>
                      `
                const marker = new amapInstance.value.Marker({
                    content,
                    position: [item.Lng, item.Lat], //基点位置
                    offset: new amapInstance.value.Pixel(-13, -30 * index), //相对于基点的偏移位置
                })
                amap.value.add(marker)
                // 存储marker引用
                markers.value.push(marker)
            } catch (error) {}
        }
    }

    watch([markerList, amap], ([list, map]) => {
        if (list.length > 0 && map && amapInstance.value) {
            try {
                addMarker()
            } catch (error) {}
        }
    })

    onMounted(() => {
        markerList.value = [
            {
                id: 1,
                Lng: 120.1619,
                Lat: 30.2936,
                gameTime: dayjs().format('YYYY-MM-DD') + ' 10:00:00',
                homeTeam: '临平',
                visitTeam: '上城',
                homeScore: 69,
                visitScore: 62,
            },
            {
                id: 2,
                Lng: 119.939623,
                Lat: 30.047286,
                gameTime: dayjs().format('YYYY-MM-DD') + ' 14:00:00',
                homeTeam: '富阳',
                visitTeam: '淳安',
            },
            {
                id: 3,
                Lng: 120.1619,
                Lat: 30.2936,
                gameTime: dayjs().format('YYYY-MM-DD') + ' 19:00:00',
                homeTeam: '拱墅',
                visitTeam: '滨江',
            },
        ]
    })
</script>

<template>
    <Amap />
</template>

<style scoped lang="less"></style>

<style lang="less">
    .custom-content-marker-container {
        display: flex;
        align-items: center;
        justify-content: center;

        .custom-content-marker-time {
            width: 36px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            border-radius: 4px;
            font-size: 12px;
            color: #fff;
            margin-left: 2px;
        }

        .time-end {
            background: linear-gradient(#575857, #8e8e8e);
        }

        .time-start {
            background: linear-gradient(#029c33, #15c202);
        }

        .time-unbegin {
            background: linear-gradient(#f39107, #d2e904);
        }

        .custom-content-marker-score {
            width: 36px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            border-radius: 4px;
            background: linear-gradient(#575857, #8e8e8e);
            font-size: 12px;
            color: #fff;
            margin-left: 2px;
        }
    }

    .custom-content-marker {
        width: 90px;
        height: 26px;
        line-height: 26px;
        background: linear-gradient(
            rgba(105, 5, 245, 0.8),
            rgba(6, 134, 232, 0.8)
        );
        border-radius: 4px;
        padding: 2px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .custom-content-marker-team {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;

            span {
                font-size: 12px;
                color: #fff;
                margin-right: 4px;
            }

            span:last-child {
                margin-right: 0;
            }

            span:nth-child(2) {
                color: #fff;
                background: linear-gradient(#ff291c, #ffef9c);
                padding: 0 4px;
                border-radius: 2px;
            }
        }
    }
</style>
